// Coloring
$filters-gray-500: var(--bs-gray-500);
$filters-gray-700: var(--bs-gray-700);
$filters-gray-900: var(--bs-gray-900);
$filters-card-color: var(--ks-background-card);
$filters-border-color: var(--ks-border-primary);

// Typography
$filters-font-xs: var(--el-font-size-extra-small);

@mixin width-available {
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}

.items {
    .el-tag {
        background: $filters-border-color;
        color: $filters-gray-900;
    }

    .small {
        font-size: $filters-font-xs;
    }
}

.el-popper {
    .empty {
        color: $filters-gray-900
    }

    .scroller {
        &::-webkit-scrollbar {
            height: 3px;
            width: 3px;
        }

        &::-webkit-scrollbar-track {
            background: $filters-card-color
        }

        &::-webkit-scrollbar-thumb {
            background: $filters-border-color;
            border-radius: 0px;
        }
    }
}